<template>
  <div>
    <BasicTable @register="registerTable">
      <!--操作按钮-->
      <template #toolbar>
        <a-button type="primary" @click="handleAdd">新增</a-button>
<!--        <a-button type="primary" @click="handleSync">同步品牌</a-button>-->
        <a-dropdown v-if="hasSelectedRows">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="handleBatchDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <!--行内操作-->
      <template #action="{ column, record, index }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>
    </BasicTable>
    <!--添加编辑-->
    <BrandDrawer @register="registerDrawer" @success="handleSuccess"/>
    <BcsDrawer @register="registerBcsDrawer"/>
  </div>
</template>
<script lang="ts" setup name="brand-list">
import {BasicTable, TableAction, ActionItem} from '@apps/antd-admin/src/components/Table';
import {useDrawer} from '@apps/antd-admin/src/components/Drawer';
import {useBaseTable} from '@apps/antd-admin/src/hooks';

const [registerDrawer, {openDrawer}] = useDrawer();
const [registerBcsDrawer, {openDrawer: openBcsDrawer}] = useDrawer();
import BrandDrawer from './components/BrandDrawer.vue';
import BcsDrawer from './components/BcsDrawer.vue';
import {Api,syncBrand} from './data/brand.api';
import {columns, searchFormSchema} from './data/brand.data';
//初始化Table
const {tableContext, handleDelete, handleSuccess, handleBatchDelete} = useBaseTable({
  designScope: 'brand-template',
  tableProps: {
    title: '品牌管理',
    columns: columns,
    //主键字段
    rowKey: 'brandId',
    //分页列表接口
    listUrl: Api.page,
    //删除接口
    delUrl: Api.remove,
    //是否显示索引列
    showIndexColumn: true,
    defSort: {
      order: 'hot',
      sort: 'desc',
    },
    //查询form配置
    formConfig: {
      schemas: searchFormSchema,
    },
    //操作列配置
    actionColumn: {
      fixed: 'right',
      width: 120,
    },
  },
});
//注册table数据
const [registerTable, {reload}, {rowSelection, hasSelectedRows}] = tableContext;

/**
 * 行内操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '编辑',
      icon: 'clarity:note-edit-line',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '车系列表',
      icon: 'clarity:note-edit-line',
      onClick: handleOpenBcsDrawer.bind(null, record),
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        icon: 'ant-design:delete-outlined',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}

/**
 * 新增事件
 */
function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
  });
}

/**
 * 同步品牌
 */
function handleSync() {
  syncBrand();
}

/**
 * 编辑事件
 * @param record
 */
function handleEdit(record) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

function handleOpenBcsDrawer(record) {
  openBcsDrawer(true, {
    record,
    isUpdate: false,
  });
}

</script>
